<template>
    <div class="panel-tab__content">
        <el-checkbox v-model="checked" @change="changeCC">显示附加信息</el-checkbox>
    </div>
</template>
<script>
export default {
    name: 'AddInfo',
    props: {
        businessObject: Object,
        id: String,
        type: String
    },
    inject: {
        prefix: "prefix",
        width: "width"
    },
    data() {
        return {
            checked: false,
        }
    },
    watch: {
         id: {
            immediate: true,
            handler(val) {
                val && val.length && this.resetAttributesList();
            }
        }
    },
    methods: {
         resetAttributesList() {
            this.bpmnElement = window.bpmnInstances.bpmnElement;
            this.otherExtensionList = []; // 其他扩展配置
             this.bpmnElementProperties =
                this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
                if (ex.$type !== `${this.prefix}:Infocopy`) {
                    this.otherExtensionList.push(ex);
                }
                return ex.$type === `${this.prefix}:Infocopy`;
                }) ?? [];
             // 保存所有的 扩展属性字段
            this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current), []);
            this.checked = this.bpmnElementPropertyList[0] && this.bpmnElementPropertyList[0].isShow
        },
        changeCC() {
            const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Infocopy`, {isShow: this.checked});
            this.updateElementExtensions(newPropertyObject);
            this.resetAttributesList();
        },
         updateElementExtensions(properties) {
           const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
                values: this.otherExtensionList.concat([properties])
            });
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
                extensionElements: extensions
                });
            }
    },

}
</script>